<template>
	<view class="gardens-ylss-index">
		<view class="" style="flex: 1;">
			<view class="" style="height: 100%;width: 100%">
				<view class="gardens-ylss-form" v-show="formShow">
					<uni-forms ref="form" :label-width="75" :modelValue="formData" :rules="rules">
						<uni-forms-item label="设施大类" name="ss_dl">
							<uni-data-select style="background-color: #fff;" placeholder="请选择设施大类"
								v-model="formData.ss_dl" :localdata="range" @change="change"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="设施小类" name="ss_xl">
							<uni-data-select style="background-color: #fff;" placeholder="请选择设施小类"
								v-model="formData.ss_xl" :localdata="range" @change="change"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="设施编码" name="ss_bm">
							<uni-easyinput type="text" v-model="formData.ss_bm" placeholder="请输入设施编码" />
						</uni-forms-item>
						<uni-forms-item label="责任单位" name="zr_dw">
							<uni-easyinput type="text" v-model="formData.zr_dw" placeholder="请输入责任单位" />
						</uni-forms-item>
						<uni-forms-item label="设施名称" name="ss_mc">
							<uni-easyinput class="input" v-model="formData.ss_mc" type="text"
								placeholder="请输入设施名称"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="邮箱" name="email">
							<uni-easyinput class="input" v-model="formData.email" type="text" placeholder="请输入邮箱" />
						</uni-forms-item>
					</uni-forms>
					<view class="gardens-ylss-btn-ground">
						<button @click="submit">查询</button>
						<button @click="reset">重置</button>
					</view>
				</view>
				<view class="" style="width: 100%;height: 100%;position: absolute;">
					<web-view id="web" :src="pageMapUrl.ylss" @message="handleMessage"></web-view>
					<!-- <iframe id="iframeId" style="width: 100%;height: 100%;" src="/static/map.html"
						@message="handleMessage"></iframe> -->
				</view>
			</view>
		</view>

		<!-- <view class="gardens-ylss-gis">
		</view> -->
		<!-- <iframe style="width: 100%;height: 100%;position: absolute;z-index: -1;" src="http://127.0.0.1:5500/map.html" ></iframe> -->
	</view>
</template>

<script>
	// import maplibregl from './maplibre-gl.js';
	// console.log(maplibregl,'ss')
	export default {
		data() {
			return {
				formShow: false,
				wv: null, // 计划创建的 webview
				webviewId: 'web-view', // 记录webview的id 
				// 表单数据
				formData: {
					ss_dl: '',
					ss_xl: '',
					ss_bm: '',
					zr_dw: '',
					ss_mc: '',
					email: ''
				},
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				rules: {
					ss_dl: {
						rules: [{
							required: true,
							errorMessage: '不能为空',
						}]
					},
					// 对name字段进行必填验证
					ss_mc: {
						rules: [{
								required: true,
								errorMessage: '不能为空',
							},
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址',
						}]
					}
				}
			}
		},
		components: {},
		computed: {
			pages: function() {
				return getCurrentPages().length > 1
			}
		},
		onLoad() {
			let height = 0; //定义动态的高度变量
			let statusbar = 0; // 动态状态栏高度
			uni.getSystemInfo({ // 获取当前设备的具体信息
				success: (sysinfo) => {
					statusbar = sysinfo.statusBarHeight;
					height = sysinfo.windowHeight;
				}
			});
			// #ifdef APP-PLUS
			let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
			const that = this
			setTimeout(function() {
				that.wv = currentWebview.children()[0];
				that.wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
					top: statusbar,
					height: height - statusbar,
				})
			}, 500);
			// #endif

			// 如果想向webview发送事件就调用postMessage方法
		},
		mounted() {
			this.handleMessage()
			// this.dom = document.getElementById('iframeId')
			// 接收iframe传过来的值
			// A.html
			window.addEventListener("message", (e) => {
				console.log(e.data, 'ss')
				console.log(e.origin)
				console.log(e.source)
			})
		},
		methods: {
			backClick() {
				uni.navigateBack()
			},
			handleMessage(evt) {
				console.log('接收到的消息：1');
			},
			/**
			 * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
			 * @param {String} name 字段名称
			 * @param {String} value 表单域的值
			 */
			binddata(name, value) {
				// 通过 input 事件设置表单指定 name 的值
				this.$refs.form.setValue(name, value)
			},
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
				}).catch(err => {
					// console.log('表单错误信息：', err);
					this.$u.toast('查询条件为空，查询错误')
				})
			},
			reset() {
				this.$refs.form.clearValidate()
			},
			change(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss">
	@import url('/static/maplibre-gl.css');
	$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.gardens-ylss-index {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		height: 100%;

		.gardens-ylss-form {
			position: absolute;
			width: 100%;
			z-index: 2;
			padding: 10px;
			box-sizing: border-box;
			border: 1px solid #aaffff;
		}

		.gardens-ylss-gis {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
			border: 1px solid #aaffff;
		}

		.gardens-ylss-btn-ground {
			display: flex;
		}
	}
</style>